<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"

    />
    <!-- 在这个弹出层中，将来肯能展示3种界面中的一种。 我们可以写成3个组件 -->
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
            @tagClick="tagClick"
    ></HistoryHot>
    <SearchTipsList v-else-if="blockShow == 2"  @tagClick="tagClick"></SearchTipsList>
    <SearchProducts
      v-else-if="blockShow == 3"
      :Mydata="isshowList"
    ></SearchProducts>
  </div>
</template>

  <script>
import HistoryHot from "../components/MySearch/HistoryHot.vue";
import SearchTipsList from "../components/MySearch/SearchTipsList.vue";
import SearchProducts from "../components/MySearch/SearchProducts.vue";
import { GetsearchDetail, GETHOTWord } from "../request/api";
export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts,
  },
  data() {
    return {
      isshowList: [],
      // 搜索框的v-model值
      searchVal: "",
      // 搜索框的placeholder值
      placeholderVal: "",
      // blockShow用来决定将来弹出层展示的是哪个界面
      // blockShow为1 则表示  展示历史和热门界面
      // blockShow为2 则表示  展示提示列表界面
      // blockShow为3 则表示  展示商品列表界面
      blockShow: 1,
      historyKeywordList: "",
    };
  },

  methods: {
    tagClick(val) {
      console.log("tagClick执行");
      this.searchVal = val;
      this.onSearch(this.searchVal);
    },
    priceChange(value) {
      this.onSearch(this.searchVal);
    },
    // 实时搜索
    onInput(value) {
      // 把界面改成2
      this.blockShow = 2;
    },
    onSearch(value) {
      // 切换到第3个界面
      this.blockShow = 3;
      GetsearchDetail({ keyword: value }).then((res) => {
        console.log(res.data);
        this.isshowList = res.data.data;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>
   
  <style scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: #efefef;
}
</style>